<template>
	<view class="gesture">
		<view class="view_div">
			<view class="title">手势密码锁定</view>
			<u-switch v-model="checkedMOn" size="40" @change="changeSwitch"></u-switch>
		</view>
		<u-button v-show="!checkedM" class="margin_top30" @click="showPopup">设置手势密码</u-button>
		<u-button v-show="checkedM" class="margin_top30" @click="showPopup">修改手势密码</u-button>

		<u-popup v-model="show" mode="bottom" border-radius="14" height="100%" :closeable="true">
			<view class="test">
				<view>{{ unlocking }}</view>
				<mpvue-gesture-lock :containerWidth="590" :cycleRadius="70" @end="onEnd" :password="password"></mpvue-gesture-lock>
			</view>
		</u-popup>

		<u-toast ref="uToast" />
	</view>
</template>

<script>
import mpvueGestureLock from "@/components/mpvueGestureLock";
export default {
	onLoad() {
		try {
			// 手动打开或者关闭 手势密码
			// var ifUseGesturesPwd = uni.getStorageSync("ifUseGesturesPwd");
			// console.log(ifUseGesturesPwd);
			//如果打开了手势密码，则获取用户信息，获取是否设置过手势密码
			// this.getUserInfo();
			// if (ifUseGesturesPwd) {
			//   this.getUserInfo();
			// } else {
			//   //用户不使用手势密码登录
			//   this.checkedM = false;
			// }
		} catch (e) {
			// error
			console.log(e);
		}
	},
	onReady() {},
	components: {
		mpvueGestureLock,
	},
	data() {
		return {
			checkedMOn: false,
			checkedM: false,
			show: false, //显示设置手势密码的弹窗
			password: [],
			unlocking: "绘制解锁图案",
			//用户是否开启手势密码
			ifUseGesturesPwd: false,
		};
	},
	watch: {
		// checkedM(val) {
		//   // 等于false，意味着用户手动关闭了switch
		//   console.log("--------监听checkedM----------" + val);
		//   this.checkedM = val;
		//   // 用来判断是否是用手势密码登录的
		//   uni.setStorageSync("gestureTheMark", val);
		//   this.changeUseLock(val);
		// },
	},
	onShow() {
		if (uni.getStorageSync("gestureTheMarkCode")) {
			this.checkedM = true;
			this.checkedMOn = uni.getStorageSync("gestureTheMark");
		} else {
			this.checkedM = false;
			this.checkedMOn = false;
			uni.setStorageSync("gestureTheMark", false);
		}
	},
	methods: {
		// 是否开启手势密码验证
		changeSwitch(status) {
			if (uni.getStorageSync("gestureTheMarkCode")) {
				this.checkedMOn = status;
				uni.setStorageSync("gestureTheMark", status);
			} else {
				this.$refs.uToast.show({
					title: "请先设置手势密码!",
					type: "error",
				});
				this.checkedMOn = false;
				uni.setStorageSync("gestureTheMark", false);
			}
		},
		//  打开手势密码弹窗
		showPopup() {
			this.show = true;
			this.password = [];
		},
		// 设置手势密码
		onEnd(data) {
			if (data.length <= 2) {
				this.$refs.uToast.show({
					title: "手势密码过短，请至少连接三个点。",
					type: "error",
				});
			} else {
				if (this.password.length) {
					if (this.password.join("") === data.join("")) {
						this.password = [];
						uni.setStorageSync(
							"gestureTheMarkCode",
							JSON.stringify(data)
						);
						this.show = false;
						this.checkedM = true;
						this.$refs.uToast.show({
							title: "设置成功",
							type: "success",
						});
					} else {
						this.unlocking = "两次手势设定不一致";
						this.password = [];
					}
				} else {
					this.unlocking = "请确认手势设定";
					this.password = data;
				}
			}
		},
	},
};
</script>

<style lang="scss" scoped>
.gesture {
	width: 100vw;
	height: 100vh;
	background-color: rgba(247, 247, 248, 1);
	padding: 30rpx;

	.view_div {
		width: 100%;
		background: #ffffff;
		border-radius: 8px;
		padding: 30rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;

		.title {
			font-size: 30rpx;
			font-family: PingFangSC-Medium, PingFang SC;
			color: #333333;
		}
	}

	.margin_top30 {
		margin-top: 5vh;
	}

	.test {
		width: 100%;
		height: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		position: relative;
		flex-direction: column;
	}
}
</style>
